<template>
<div class="layout">

  <NavHeader>
  </NavHeader>

  <div class="content">
    <div class="login-frame">
      <img src="/static/login-banner.jpg" class="login-img"/>

      <Card class="login-form" dis-hover>
        <p slot="title">用户登录</p>
        <Form ref="formAuth" :model="formAuth" :rules="ruleValidate" >
          <Form-item prop="username">
            <Input v-model="formAuth.username" placeholder="请输入用户" icon="person" />
          </Form-item>
          <Form-item prop="password">
            <Input type="password" v-model="formAuth.password" placeholder="请输入密码" icon="locked"></Input>
          </Form-item>
          <Form-item>
            <Button long type="primary" @click="handleLogin" class="login-btn">登录</Button>
          </Form-item>
          <Form-item>
            <a style="float:right;" @click="$router.push('/forgot')">忘记密码?</a>
          </Form-item>

          <!-- <Form-item>
            没有账号? 请点击
            <a @click="$router.push('/register')">注册学校账户</a>
          </Form-item>
          -->

        </Form>
      </Card>

    </div>
  </div>

  <NavFooter>
  </NavFooter>

</div>
</template>

<script>
  import Account from '@/service/account'
  import { mapState } from 'vuex'
  import Rest from '@/service/rest'
  import NavHeader from '@/app/Header'
  import NavFooter from '@/app/Footer'

  export default {
    name: 'login',
    components: {
      NavHeader,
      NavFooter
    },
    data () {
      return {
        formAuth: {
          username: 'admin',
          password: 'admin'
        },
        ruleValidate: {
          username: [
            {
              required: true,
              message: '用户不能为空'
            }
          ],
          password: [
            {
              required: true,
              message: '密码不能为空'
            }
          ]
        }
      }
    },
    computed: {
      ...mapState(['user', 'account'])
    },
    methods: {
      getUser (id) {
        this.$store.dispatch('getUser', {id})
      },
      handleLogin () {
        this.$refs.formAuth.validate((valid) => {
          if (valid) {
            Account.login(this.formAuth.username, this.formAuth.password).then((user) => {
              this.$store.commit('SET_ACCOUNT', user)
              // this.$store.dispatch('getAccountPerms', {username: this.formAuth.username})
              this.$Message.success('登录成功')
              this.$router.push(this.$route.query.redirect || '/')
            }).catch(Rest.errorHandler)
          }
        })
      },
      handleRegister () {
        this.$router.push('/register')
      },
      handleAbout () {
        this.$router.push('/about')
      },
      handleContact () {
      },
      handleForgot () {
        this.$router.push('/forgot')
      }
    }
  }
</script>

<style scoped>

.layout {
  background: white;
}

.content {
  background-color: #19B9FC;

}

.login-frame {
  text-align: center;
  height: 600px;
  padding-top: 80px;
}

.login-frame img {
  vertical-align:middle;
  margin-right: 32px;
}

.login-frame div {
  vertical-align:middle;
}

.login-img {
  width: 600px;
}

.login-btn {
  height: 36px;
}

.login-form {
  display: inline-block;
  width: 360px;
  height: 400px;
  background-color: white;
}

</style>
